<template>
  <div class="main">
    <!-- 搜索表单 -->
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="投放组" prop="group_id">
        <el-select
          v-model="form.group_id"
          placeholder="请选择投放组"
          clearable
          class="!w-[180px]"
          filterable
        >
          <el-option
            v-for="group in groupOptions"
            :key="group.value"
            :label="group.label"
            :value="group.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="平台" prop="platform">
        <el-select
          v-model="form.platform"
          placeholder="请选择平台"
          clearable
          class="!w-[150px]"
        >
          <el-option
            v-for="platform in platformOptions"
            :key="platform.value"
            :label="platform.label"
            :value="platform.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="时间范围" prop="date_range">
        <el-select v-model="quickSelect" placeholder="选择时间" @change="selectTimeRange" style="width: 103px; border-radius: 0; border-right: 0px">
          <el-option label="今天" value="today" />
          <el-option label="昨天" value="yesterday" />
          <el-option label="最近七天" value="7day" />
          <el-option label="最近30天" value="30day" />
          <el-option label="本月" value="month" />
          <el-option label="上月" value="lastmonth" />
          <el-option label="自定义" value="diy" />
        </el-select>
        <el-date-picker
          v-model="form.date_range"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 300px; border-radius: 0px; border-left: 0; margin-left: -1px"
          @change="handleDateChange"
        />
      </el-form-item>

      <el-form-item label="">
        <el-checkbox v-model="showGroupData">
          显示投放组数据
        </el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon(Search)"
          :loading="loading"
          @click="onSearch"
        >
          {{ t("buttons.search") }}
        </el-button>
        <el-button
          :icon="useRenderIcon(Refresh)"
          @click="resetForm(formRef)"
        >
          {{ t("buttons.reset") }}
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 表格工具栏 -->
    <PureTableBar
      title="广告计划2统计数据"
      :columns="columns"
      :isExpandAll="false"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
      @fullscreen="onFullscreen"
    >
      <template #buttons>
        <!-- 可以在这里添加导出等功能按钮 -->
      </template>

      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          adaptive
          :adaptiveConfig="{ offsetBottom: 45 }"
          align-whole="center"
          :row-key="(row) => `${row.type}_${row.id}`"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          :data="filteredDataList"
          :columns="dynamicColumns"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          :default-sort="{ prop: sortField, order: sortOrder === 'desc' ? 'descending' : 'ascending' }"
          @sort-change="onSortChange"
          show-summary
          :summary-method="getSummaries"
        />
      </template>
    </PureTableBar>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useAdPlan2Statistics } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

// 图标导入
import Refresh from "@iconify-icons/ep/refresh";
import Search from "@iconify-icons/ep/search";

defineOptions({
  name: "AdPlan2Statistics"
});

const formRef = ref();
const tableRef = ref();

const {
  form,
  loading,
  columns,
  dataList,
  groupOptions,
  platformOptions,
  quickSelect,
  sortField,
  sortOrder,
  onSearch,
  resetForm,
  handleSortChange,
  selectTimeRange,
  handleDateChange,
  formatAmount,
  getSummaries
} = useAdPlan2Statistics();

// 展示组数据的控制开关
const showGroupData = ref(false);

// 过滤后的数据列表
const filteredDataList = computed(() => {
  if (showGroupData.value) {
    // 显示所有数据（投放组 + 投放人员）
    return dataList.value;
  } else {
    // 仅显示投放人员数据
    return dataList.value.filter(item => item.type === 'user');
  }
});

function onFullscreen() {
  // 重置表格高度
  tableRef.value.setAdaptive();
}

// 处理表格排序变化
function onSortChange({ prop, order }) {
  if (prop && ['total_cost'].includes(prop)) {
    handleSortChange(prop);
  }
}
</script>

<style scoped>
.main {
  margin: 0;
  padding: 0;
}

.search-form {
  margin-bottom: 16px;
}

:deep(.el-form-item) {
  margin-bottom: 12px;
}
</style> 